<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="authority-icon"
  >
    <!-- 建筑物底座 -->
    <rect
      x="12"
      y="48"
      width="40"
      height="8"
      rx="2"
      fill="url(#authority-gradient-base)"
    />
    <!-- 台阶 -->
    <rect x="10" y="46" width="44" height="2" fill="#4facfe" opacity="0.3" />
    <rect x="8" y="44" width="48" height="2" fill="#4facfe" opacity="0.2" />

    <!-- 柱子1 -->
    <rect
      x="16"
      y="20"
      width="4"
      height="28"
      fill="url(#authority-gradient-column)"
    />
    <!-- 柱子2 -->
    <rect
      x="24"
      y="20"
      width="4"
      height="28"
      fill="url(#authority-gradient-column)"
    />
    <!-- 柱子3 -->
    <rect
      x="32"
      y="20"
      width="4"
      height="28"
      fill="url(#authority-gradient-column)"
    />
    <!-- 柱子4 -->
    <rect
      x="40"
      y="20"
      width="4"
      height="28"
      fill="url(#authority-gradient-column)"
    />

    <!-- 三角形屋顶 -->
    <path
      d="M32 8L52 20H12L32 8Z"
      fill="url(#authority-gradient-roof)"
    />
    <!-- 屋顶边缘 -->
    <path
      d="M32 8L52 20H12L32 8Z"
      stroke="white"
      stroke-width="1"
      fill="none"
      opacity="0.3"
    />

    <!-- 盾牌装饰 -->
    <path
      d="M32 26C32 26 28 28 28 32C28 36 32 38 32 38C32 38 36 36 36 32C36 28 32 26 32 26Z"
      fill="#FFD700"
      opacity="0.9"
    />
    <!-- 盾牌勾选 -->
    <path
      d="M30 32L31.5 33.5L34 31"
      stroke="white"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
    />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="authority-gradient-base" x1="12" y1="48" x2="52" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4facfe" />
        <stop offset="100%" stop-color="#00f2fe" />
      </linearGradient>
      <linearGradient id="authority-gradient-column" x1="20" y1="20" x2="20" y2="48" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#7ee8fa" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="authority-gradient-roof" x1="32" y1="8" x2="32" y2="20" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.authority-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.authority-icon:hover {
  transform: scale(1.05);
}
</style>
